<template>
  <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span> <i :class="data.icon"></i>{{ node.label }} </span>
    </span>
  </el-tree>
</template>

<script>
// var server_tree_data = {
//   children: [
//     { name: "hw1.md", isDir: false },
//     {
//       children: [{ name: "hw2.md", isDir: false }],
//       name: "hw2",
//       isDir: true,
//     },
//     {
//       children: [
//         { name: "image-20210409154145727.png", isDir: false },
//         { name: "image-20210409155459149.png", isDir: false },
//         { name: "image-20210409160906428.png", isDir: false },
//         { name: "image-20210409164428568.png", isDir: false },
//         { name: "image-20210409170053943.png", isDir: false },
//         { name: "image-20210409170832929.png", isDir: false },
//         { name: "image-20210409173343113.png", isDir: false },
//         { name: "image-20210409173450551.png", isDir: false },
//         { name: "image-20210409174136469.png", isDir: false },
//         { name: "image-20210409174223580.png", isDir: false },
//         { name: "image-20210409174547324.png", isDir: false },
//         { name: "image-20210409190403081.png", isDir: false },
//       ],
//       name: "image",
//       isDir: true,
//     },
//     { name: "layoutinflator.md", isDir: false },
//     { name: "点击事件.md", isDir: false },
//   ],
//   name: "android",
//   isDir: true,
// };

export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  created() {
    this.$axios.get("/api/tree").then((response) => {
      let server_tree_root = response.data.dir;
      this.data.push(this.changedata(server_tree_root));
    });
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
    changedata: function (server_tree_root) {
      var tree_data = this.traversal(server_tree_root);
      return tree_data;
    },
    traversal: function (server_node) {
      var temp = {};
      temp.label = server_node.name;
      if (server_node.isDir) {
        temp.icon = "el-icon-folder";
        temp.children = [];
        for (let index = 0; index < server_node.children.length; index++) {
          temp.children.push(this.traversal(server_node.children[index]));
        }
      } else {
        temp.icon = "el-icon-document";
      }
      return temp;
    },
  },
};
</script>